<!--
 * @Author: 黄达全
 * @Date: 2024-08-21 18:36:25
 * @LastEditTime: 2024-08-21 21:23:14
-->
<script lang="ts" setup>
import { ref } from "vue"
const tabs=[
    {
        label: '全部',
        name: 'all'
    },
    {
        label: '审核中',
        name: 'audit'
    },
    {
        label: '已上架',
        name: 'sale'
    },
    {
        label: '已下架',
        name: 'off'
    },
    {
        label: '库存预警',
        name: 'warning'
    },
    {
        label: '回收站',
        name: 'recycle'
    }
]
const isActiveTab = ref("all")

const emits=defineEmits(['update:modelValue'])
const changeHandle = (e:Event) => {
    emits("update:modelValue",e)
}
</script>

<template>
    <el-tabs v-model="isActiveTab" @tab-change="changeHandle" tab-position="left" class="tabs">
        <el-tab-pane v-for="item in tabs" :label="item.label" :name="item.name"></el-tab-pane>
    </el-tabs>
</template>

<style lang="scss" scoped>
:deep(.el-tabs--left .el-tabs__header.is-left) {
    width: 100%;
    margin: 0;
}

:deep(.el-tabs--left .el-tabs__nav-wrap.is-left) {
    margin: 0;
}

:deep(.is-left) {
    width: 100%;
}

:deep(.el-tabs__content) {
    width: 100%;
}
</style>
